<template>
  <div class="task-model-con">
    <template v-if="list.length > 0">
      <!--  v-show="index < num" -->
      <div class="log-line" v-for="item in list" :key="item.id">
        <span class="dian"></span>
        <div class="log-con">
          <span>{{ item.createByName }}</span>
          <span>{{ item.createByOrgName }}</span>
          <span>【{{ item.taskLogContent }}】</span>
        </div>
        <div class="log-time">{{ item.createTime }}</div>
      </div>
      <!-- <p class="showMoreText" v-if="list.length > 5" @click="showMore">
        {{ showText }}
      </p> -->
    </template>
    <van-empty description="暂无数据" v-else />
  </div>
</template>
<script>
import { listTaskLog } from '@api/api-task.js'

export default {
  name: 'TaskDetailsLog',
  props: {
    // 详情
    detailsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      list: [],
      num: 5,
      showText: '显示全部',
      isShow: true,
    }
  },
  computed: {},
  watch: {
    /* detailsData: {
      handler(obj) {
        if (obj.id) {
          this.initdata()
        }
      },
      deep: true,
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    async initdata() {
      const { data } = await listTaskLog({ id: this.detailsData.id })
      this.list = [...data]
    },
    showMore() {
      this.isShow = !this.isShow
      this.num = this.isShow ? 5 : this.list.length
      this.showText = this.isShow ? '显示全部' : '收起'
    },
  },
}
</script>
<style lang="scss" scoped>
.task-model-con {
  background: #fff;
  font-size: $fontSize30;
}
/* 任务日志 开始*/
.log-line {
  font-size: $fontSize30;
  padding: px2rem(20) px2rem(20) px2rem(20) px2rem(40);
  position: relative;
  border-bottom: 1px solid #eee;
  .dian {
    position: absolute;
    margin-right: px2rem(20);
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #d7d7d7;
    top: 50%;
    left: px2rem(20);
  }
  .log-con {
    display: flex;
    align-items: center;
    span {
      margin-right: px2rem(30);
      color: #333;
    }
  }
  .log-time {
    color: #606266;
  }
}
.showMoreText {
  text-align: center;
  color: #2261b9;
  padding: 0.1rem 0;
  cursor: pointer;
}
</style>
